<template>
  <div class="container-wap">
   <div id="item_left" class="item"></div>
   <div id="item_right" class="item"></div>
  </div>
  <div class="plumbBox">
    <div v-for="(item) in info" :key="item.name" :id="item.name" :style="getStyle(item)">
      {{ item.context }}
      <span v-if="item.status === 'loading'">
        1
      </span>
      <span v-if="item.status === 'success'">
        2
      </span>
      <span v-if="item.status === 'error'">
        3
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { ref } from 'vue'
// const name = ref('你好')
const jsPlumb = window.jsPlumb;
// console.log(jsPlumb, 99)
// jsPlumb.ready(function () {
//   const common = {
//     endpoint: 'Rectangle',
//     connector: ['Bezier'],
//     anchor: ['Left', 'Right']
//   }
//   jsPlumb.connect({
//     source: 'item_left',
//     target: 'item_right',
//     paintStyle: { stroke: 'lightgray', strokeWidth: 3 },
//     endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 },
//     overlays: [['Arrow', { width: 12, length: 12, location: 0.5 }]]
//   }, common)

import { nextTick, onMounted } from "vue";

//   jsPlumb.addEndpoint('item_left', {
//     anchors: ['Right']
//   })
//   jsPlumb.draggable('item_left')
//   jsPlumb.draggable('item_right')
// })
const globalConfig = {
  anchor: ['Bottom', 'Top', 'Left', 'Right'],
  connector: 'Bezier',
  endpoint: 'Blank',
  painStyle: {stroke: '#364249', strokeWidth: 1},
  overlays: [['Arrow', {width: 5, length: 5, location: 1}]],
  endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 }
}
let info = [
  {
    name: 'div1',
    to: ['div2', 'div3'],
    top: 300,
    left: 100,
    color: 'red',
    context: '开始运行',
    status: 'success'
  },
  {
    name: 'div2',
    to: ['div4'],
    top: 200,
    left: 500,
    color: 'green',
    context: '构建任务1',
    status: 'success'
  },
  {
    name: 'div3',
    to: ['div5'],
    top: 400,
    left: 500,
    color: 'green',
    context: '任务构建2',
    status: 'error'
  },
  {
    name: 'div4',
    to: [],
    top: 200,
    left: 900,
    color: 'blue',
    context: '完成部署1',
    status: 'success'
  },
  {
    name: 'div5',
    to: [],
    top: 400,
    left: 900,
    color: 'blue',
    context: '完成部署2',
    status: 'loading'
  }
];
info.map(item => item = Object.assign(item, globalConfig))
const getStyle = function(item: any) {
  return {
   position: 'absolute',
   left: item.left + 'px',
   top: item.top + 'px',
   width: '200px',
   height: '50px',
   lineHeight: '50px',
   textAlign: 'center',
   borderLeft: '5px solid blue',
   borderRadius: '4px',
   boxShadow: '#eee 3px 3px 3px 3px'
  }
}
onMounted(() => {
  nextTick(() => {
    let renderList: any = [];
    info.forEach((item:any) => {
      if (item.to.length > 0) {
        item.to.forEach((v:any) => {
          renderList.push({
            source: item.name,
            target: v,
            anchor: item.anchor,
            connector: item.connector,
            endpoint: item.endpoint,
            overlays: item.overlays,
            painStyle: item.painStyle,
            endpointStyle: item.endpointStyle
          })
        })
      }
    });
    jsPlumb.ready(() => {
      renderList.forEach((item: any) => {
        jsPlumb.connect(item)
      })
    })
  })
})
</script>

<style lang="scss" scoped>
.container-wap{
  display: flex;
}
.item+.item{
  margin-left: 200px;
}
.item{
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
.plumbBox{
  position: relative;
  width: 100%;
  height: 100%;
}
</style>

